<template>
  <view class="record_">
   <!-- <view class="header_wrapper">
      <image src="https://www.ylnumber.cn/file/test/productImage/20230713/cd205d711a5e4d28b2ac23822030fa25.png"></image>
      <view class="header_">
        <view class="left_">
          <view>
            <text>￥</text>
            <view>{{ list.arrive||0 }}</view>
          </view>
          <text>已提现(元)</text>
        </view>
        <view class="right_">
          <view>
            <text>￥</text>
            <view>{{ list.await||0 }}</view>
          </view>
          <text>提现待审核(元)</text>
        </view>
      </view>
    </view> -->
    <view class="record_wrapper">
		<!-- v-for="(item, index) in records" :key="index" -->
      <view class="item_wrapper" v-for="(item, index) in records" :key="index">
        <view class="time_wrapper">
			<!-- {{ item.applyTime.replace(/T/g,' ').replace(/Z/g,'') }} -->
          <view class="time_">
			  <text>创建时间:{{item.createTime}}</text> 
			  <view v-if="item.detailType==1"> 购买商品</view>
			  <view v-if="item.detailType==2"> 购买礼包</view>
			  <view v-if="item.detailType==3"> 获得佣金</view>
			  <view v-if="item.detailType==4"> 佣金提现</view>
			  <view v-if="item.detailType==5"> 转账</view>
			  <view v-if="item.detailType==6"> 接收转账</view>
			  <view v-if="item.detailType==7"> 后台充值</view>
		  </view>
          <!--         待审核背景 -->
         </view>
        <view class="info_wrapper">
          <view class="top_">
			  <view class="item_" v-if="item.detailType==1">
			    <text>实际支付金额</text>
			    <view class="itemcolor_">￥{{item.money}}</view>
			  </view>
			  <view class="item_" v-if="item.detailType==2">
			    <text>实际支付金额</text>
			    <view class="itemcolor_">￥{{item.money}}</view>
			  </view>
			  <view class="item_" v-if="item.detailType==3">
			    <text>获得金额</text>
			    <view class="itemcolor_">￥{{item.money}}</view>
			  </view>
              <view class="item_" v-if="item.detailType==4">
                <text>实际到账金额</text>
                <view class="itemcolor_">￥{{item.money}}</view>
              </view>
			  <view class="item_" v-if="item.detailType==5">
			    <text>实际转账金额</text>
			    <view class="itemcolor_">￥{{item.money}}</view>
			  </view>
			  <view class="item_" v-if="item.detailType==6">
			    <text>实际到账金额</text>
			    <view class="itemcolor_">￥{{item.money}}</view>
			  </view>
			  <view class="item_" v-if="item.detailType==7">
			    <text>实际到账金额</text>
			    <view class="itemcolor_">￥{{item.money}}</view>
			  </view>
           <!-- <view class="item_">
              <text>提现金额</text>
              <view class="itemcolor_">￥100</view>
            </view>
            <view class="item_">
              <text>手续费</text>
              <view class="itemcolor_">￥100</view>
            </view> -->
          </view>
          <!--          <view class="footer_wrapper">-->
          <!--            <view class="cancellation">取消申请</view>-->
          <!--          </view>-->
		  <!-- v-if="item.remarks" -->
        
        </view>
      </view>
    </view>
	
	
	<view class="none_list_wrapper" v-if="records.length === 0">
	  <view class="none_list">
	    <image src="/static/None/None_list.png"></image>
	    <text>暂无数据喔~</text>
	  </view>
	</view>
	
    <u-loadmore
	v-if="records.length !== 0"
      :status="status"
      :icon-type="iconType"
      :load-text="loadText"
      @loadmore="loadNextFn"
    />
  </view>
</template>

<script>
import { funddetails } from "@/api/funddetails";

export default {
  name: "index",
  data() {
    return {
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      list: {},
      records: [],
      params: {
        size: 20,
        current: 1,
		userId:"",
      },
    };
  },
  //上拉
  onReachBottom() {
    console.log("触发上拉加载");
    this.listPage();
  },
  onShow() {
	  this.params.userId = uni.getStorageSync("userId") || "";
    this.listPage();
  },
  methods: {
    auditStatusFn(item) {
      const status = Number(item);
      return status === 1
        ? "待审核"
        : status === 2
        ? "处理中"
        : status === 3
        ? "提现异常"
        : status === 4
        ? "已到账"
        : status === 5
        ? "不通过"
        : "未知";
    },

    async listPage() {
      this.status = "loading";
      const res = await funddetails(this.params);
      if (res.code === 0) {
        this.list = res.data;
        this.records.push(...res.data.records);
		// this.records=[
		//     {
		//         id: 2,
		//         userId: 45,
		//         detailType: 7,//资金类型 1 -》购买商品；2 -》购买礼包；3 -》获得佣金；4 -》提现；5 -》转账；6 -》接收转账；7 -》后台充值
		//         money: -100.00,
		//         createTime: "2023-07-17 18:05:50"
		//     },
		//     {
		//         id: 1,
		//         userId: 45,
		//         detailType: 7,
		//         money: 100.00,
		//         createTime: "2023-07-17 18:05:25"
		//     }
		// ]
        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
           setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }

        if (this.records.length <= this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.records.length !== 0 &&
          res.data.records.length < this.params.size
        ) {
          this.params.current++;
           setTimeout(() => {
            this.status = "loadmore";
          }, 800);
          return;
        }
		
		
		
		
		
      }
    },

    //点击组件触发上拉加载
    loadNextFn() {
      this.listPage();
    },
  },
};
</script>

<style scoped lang="scss">
.record_ {
  padding: rpx(12) rpx(12) rpx(16);
  > .header_wrapper {
    position: relative;
    > image {
      width: rpx(351);
      height: rpx(100);
      vertical-align: middle;
    }
    > .header_ {
      position: absolute;
      top: rpx(21);
      left: rpx(42);
      right: rpx(42);
      bottom: 0;
      display: flex;
      justify-content: space-between;
      > view {
        display: flex;
        align-items: center;
        flex-direction: column;
        > view {
          font-weight: bold;
          color: #ffffff;
          font-size: rpx(11);
          display: flex;
          align-items: center;
          margin-bottom: rpx(4);
          > text {
            margin-top: rpx(3);
          }
          > view {
            font-size: rpx(17);
          }
        }
        > text {
          font-size: rpx(12);
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  > .record_wrapper {
    margin-top: rpx(2);
    > .item_wrapper {
      width: rpx(351);
      background: #ffffff;
      border-radius: rpx(5);
      margin-bottom: rpx(8);
      > .time_wrapper {
        height: rpx(38);
        width: 100%;
        // background: linear-gradient(
        //   93deg,
        //   #fff3e6 0%,
        //   rgba(255, 255, 255, 0) 100%
        // );
		background-color: #FAFAFA;
        border-radius: rpx(5) rpx(5) 0 0;
        display: flex;
        align-items: center;
        padding-left: rpx(12);
		padding-right: rpx(12);
        justify-content: space-between;
		box-sizing: border-box;
        > .time_ {
          font-size: rpx(13);
          font-weight: 400;
          color: #353535;
		  display: flex;
		  justify-content: space-between;
		  width: 100%;
        }
        > .status_ {
          //width: rpx(72);
          //height: 100%;
          height: 100%;
          width: rpx(72);
          position: relative;
          > view {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: rpx(13);
            font-weight: bold;
            color: #ffffff;
          }
          > image {
            width: rpx(72);
            height: 100%;
          }
        }
      }
      > .info_wrapper {
        padding: rpx(8) rpx(12) rpx(0);
        > .top_ {
          border-bottom: rpx(1) solid #efefef;
          padding-bottom: rpx(12);
          > .item_ {
            display: flex;
            justify-content: space-between;
            &:not(:last-child) {
              margin-bottom: rpx(8);
            }
            > text {
              font-size: rpx(13);
              font-weight: 400;
              color: #888888;
            }
            > view {
              font-size: rpx(13);
              font-weight: 400;
              color: #353535;
            }
			> .itemcolor_{
				color: #FA5151;
			}
			
          }
        }
        > .footer_wrapper {
          display: flex;
          padding: rpx(12) rpx(0);
          > .cancellation {
            margin-left: auto;
            width: rpx(96);
            height: rpx(36);
            border-radius: rpx(18);
            border: rpx(1) solid #dddddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: rpx(15);
            font-weight: 400;
            color: #888888;
          }
          > .item_ {
            font-size: rpx(12);
            font-weight: 400;
            color: #b2b2b2;
          }
        }
      }
    }
  }
  > .none_list_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	height: 100%;
    > .none_list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
	  margin-top: 30vh;
  	
      > image {
        width: rpx(222);
        height: rpx(158);
        vertical-align: middle;
      }
      > text {
        font-size: rpx(13);
        font-weight: 400;
        color: #b2b2b2;
      }
    }
  }
  
}
</style>
